<template>
	<view class="box-0">
		<view class="block-1 df-aj-c">
		
			<text>{{userInfo.accumulatePoints}}</text>
			<text v-if="userInfo != ''">我的积分</text>

		</view>
		<view class="card-1 df-a">
			<view class="df-aj-c jifen-view-add">
				<view class="iconfont iconshouru"></view>
				<view class="">积分收入</view>
			</view>
			<view class="line-0">
				<view class="line"></view>
			</view>
			<view class="df-aj-c jifen-view-subtract">
				<view class="iconfont iconzhichu"></view>
				<view class="">积分支出</view>
			</view>

		</view>
		<view class="card-2" :style="{height: integralHeight+'px'}" >
			<scroll-view @scrolltolower='nextPage()' lower-threshold="600" scroll-y :style="{height: integralHeight+'px'}">
				<block v-for="integralRecode in integralRecodeList">
					<view class="recode df-a-ed">
						<view class="recode-l1">
							<view class="title">
								<text style="overflow: hidden;">{{integralRecode.orderNumber}}</text>
							</view>
							<view class="">
								{{integralRecode.createTime}} {{integralRecode.describe}}
							</view>
						</view>
						<view class="df-aj-c recode-l2">
							<text>{{integralRecode.type ==1? '+' : '-'}} {{integralRecode.accumulatePoints}}</text>
						</view>
					</view>
					<view class="line2"></view>

				</block>

			</scroll-view>

		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				integralHeight: '0',
				userInfo:'',
				integralRecodeList:[],
				parameter:{
					type:''
				},
				hasNextPage:true,
				pageNum:1,
				pageSize:10
				

			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.integralHeight = res.windowHeight - uni.upx2px(530) //windoHeight为窗口高度，主要使用的是这个
					console.log(that.integralHeight)


				}
			})
		},
		onShow() {
			this.getUserInfo()
			this.getIntegralRecode()
		},
		methods: {
			getUserInfo() {
				// this.userInfo = uni.getStorageSync('userInfo') ==null? '':uni.getStorageSync('userInfo')
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					if (userInfo != null) {
						this.userInfo = userInfo
						console.log("aaaaaaaaaaaaa==="+JSON.stringify(this.userInfo))
					}
			
				})
			
			},
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getIntegralRecode({}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.data.list.length; i++) {
								this.integralRecodeList.push(res.data.data.list[i])
							}
							this.hasNextPage = res.data.data.hasNextPage
			
						}
					})
				}
			
			},
			
			getIntegralRecode(){
				this.$api.getIntegralRecode({},this.pageNum,this.pageSize).then((res) => {
					console.log("----------------"+JSON.stringify(res.data))
					this.integralRecodeList = res.data.data.list
							
				})
			}

		}
	}
</script>

<style>
	.recode-l1 view:last-child {
		color: #adadad;
		font-size: 20rpx;
		padding-top: 15rpx;
		
		
	}
	.title text {
		word-break: break-all;
		display: -webkit-box;
		/**对象作为伸缩盒子模型展示**/
		-webkit-box-orient: vertical;
		/**设置或检索伸缩盒子对象的子元素的排列方式**/
		-webkit-line-clamp: 1;
		/**显示的行数**/
		overflow: hidden;
		/**隐藏超出的内容**/
	}

	.recode-l2 text {
		text-align: right;
		color: #FF5551;

	}
	.recode{
		padding-bottom: 10rpx;
		margin: 10rpx 30rpx;
	}

	
	.iconzhichu {
		font-size: 50rpx;
		color: #FF5551;
	}
	.iconshouru {
		font-size: 50rpx;
		color: #FF5551;
	}

	.line {
		height: 150rpx;
		width: 4rpx;
		background-color: #dadada;
		border-radius: 20rpx;
		margin: 25rpx auto;
	}

	.line2 {
		margin: 0 auto;
		height: 5rpx;
		width: 640rpx;
		background-color: #dadada;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}



	/* 水平垂直居中 */
	.df-aj-c {
		display: flex;
		flex-direction: column;
		align-content: space-around;
		justify-content: center;

	}

	/* 水平space 居中 */
	.df-a {
		display: flex;
		align-content: space-around;
		justify-content: center;
	}

	/* 水平 */
	.df-a-ed {
		display: flex;
	}

	.df-a-ed view {
		flex: 1;
	}

	.card-1 view:first-child {
		flex: 1;
		text-align: center;

	}

	.card-1 view:nth-child(2) {
		flex: 0.1;
		text-align: center;

	}

	.card-1 view:last-child {
		flex: 1;
		text-align: center;

	}

	.card-2 {
		width: 700rpx;
		height: 200rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 15rpx;
		margin-top: 80rpx;
		/* padding: 20rpx 30rpx; */
	}

	.card-1 {
		width: 700rpx;
		height: 200rpx;
		background-color: #ffffff;
		margin: -50rpx auto;
		border-radius: 15rpx;


	}

	.box-0 {
		display: flex;
		flex-direction: column;
		align-content: center;
		background-color: #e5e5e5;
		height: 100%;
	}

	.block-1 text:first-child {
		font-size: 60rpx;
		font-weight: 600;
	}

	.block-1 text {
		text-align: center;
		color: #ffffff;
	}

	.block-1 {
		width: 100%;
		height: 300rpx;
		background-color: #FF5551;
		/* border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx; */
	}

	.box {
		flex-direction: row;
		display: flex;
	}

	.box-c {
		flex-direction: column;
		display: flex;
	}
</style>
